<template>
	<view class="mosk" @touchmove.stop.prevent="moveHandle">
		<view class="mosk-box">
			<view class="mosk-box-close" @click="close"> × </view>
			<view class="mosk-box-title"> 请选择 </view>
			<block class="" v-if="showNext">
				<view class="mosk-box-list">
					<view class="" v-for="({title, status},i) in list" :key="i">
						<view class="">
							{{title}}
						</view>
						<view :class="status?'active':'defut'" @click="onchangeStatus(i)">
						</view>
					</view>
				</view>
				<view class="mosk-box-btn" @click="toNext"> 下一步 </view>
			</block>
			<block v-else>
				<view class="mosk-form">
					<view class="mosk-form-title">
						<text>收货人</text>
						<input v-model="obj.consignee" placeholder="请输入收货人姓名" placeholder-style="color:#A5A5A5"
							maxlength="10" type="text">
					</view>
					<view class="mosk-form-title">
						<text>手机号</text>
						<input v-model="obj.phonenumber" placeholder="请输入收货人手机号" placeholder-style="color:#A5A5A5"
							maxlength="11" type="phone">
					</view>
					<view class="mosk-form-title">
						<text>地址</text>
						<view class="item-address">
							<ChangAddres @change="change" style="width: 400rpx;	height: 120rpx;z-index: 8888;"
								:level="3">
								<view class="address" style="color: #262626;">
									{{obj.address||'请选择地址'}}
								</view>
							</ChangAddres>
							<uni-icons type="forward" size="18" class="icons"></uni-icons>
						</view>
					</view>
					<view class="mosk-form-title  last">
						<text>详细地址 </text>
						<input v-model="obj.detailedAddress" placeholder="如街道、门牌号等" placeholder-style="color:#A5A5A5"
							type="text">
					</view>
					<view class="mosk-form-btn" :style="{justifyContent:specsFlag?'center':''}">
						<view v-if="!specsFlag" class="confirm" @click="toup()"> 上一步 </view>
						<view class="confirm" @click="submit()"> 确认 </view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>
<script>
	import ChangAddres from "@/components/lingdang-AddressPicker/AddressPicker.vue"
	export default ({
		props: {
			id: {
				type: Number,
				default: 0
			},
			specsFlag: {
				type: Number,
				default: null
			}
		},
		components: {
			ChangAddres,
		},
		data() {
			return {
				list: [{
					title: '小号适合身高（150-170）',
					status: true
				}, {
					title: '中号适合身高（165-175）',
					status: false
				}, {
					title: '大号适合身高（175－220）',
					status: false
				}],
				changeIndex: 0,
				showNext: true,
				obj: {
					id: '', //活动id: '', //活动id
					consignee: '', //收货人
					phonenumber: '', //手机号码
					address: '', //地址
					detailedAddress: '', //详细地址
					tradeName: '', //商品名称
					productSpecifications: '', //商品规格
				}
			}
		},
		created() {
			uni.getStorageSync('buyClose') && (this.obj = uni.getStorageSync('buyClose'))
			this.specsFlag ? this.showNext = false : this.showNext = true
		},
		updated() {
			if (!this.obj.tradeName) {
				this.obj.tradeName = '小号适合身高（150-170）'
				this.obj.productSpecifications = '小号适合身高（150-170）'
			}
			uni.setStorageSync('buyClose', this.obj)
		},
		methods: {
			// picker 回调
			change(result) {
				this.obj.address = ''
				result.data.forEach((item, index) => {
					if (index === 0) {
						this.obj.address += item.name
					} else {
						this.obj.address += '-' + item.name
					}
				})
				let arr = this.obj.address.split('-');
			},
			// 选择尺码
			submit() {
				if (this.changeIndex == 0) {
					this.obj.tradeName = this.list[this.changeIndex].title
					this.obj.productSpecifications = this.list[this.changeIndex].title
				}
				this.obj.id = this.id
				if (this.specsFlag === 1) {
					this.obj.tradeName = ''
					this.obj.productSpecifications = ''
				}
				this.$fetch(this.$api.choose_size, {
					...this.obj
				}, 'POST').then(res => {
					let {
						data,
						code,
						msg
					} = res
					if (code) {
						uni.showToast({
							title: msg,
							icon: 'none'
						})
						return
					}
					uni.showToast({
						title: msg,
						icon: 'none'
					})
					this.close()
				})
			},
			close() {
				this.$emit('onClose')
			},
			// 下一步
			toNext() {
				this.showNext = false
			},
			// 上一步
			toup() {
				this.showNext = true
			},
			moveHandle() {
				return false
			},
			onchangeStatus(e = 0) {
				this.changeIndex = e
				this.list.forEach((v, i) => {
					e == i ? v.status = true : v.status = false
				})
				this.obj.tradeName = this.list[e].title
				this.obj.productSpecifications = this.list[e].title
			},
		},
	})
</script>
<style lang="scss" scoped>
	.mosk {
		z-index: 99;
		position: fixed;
		top: 0;
		height: 100vh;
		width: 100vw;
		background: rgba(0, 0, 0, 0.5);
		display: grid;
		place-items: center;

		&-box {
			width: 630rpx;
			background: #FFF;
			border-radius: 24rpx;
			opacity: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 804rpx;

			&-close {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				font-size: 53rpx;
				background: #F1F1F5;
				box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
				color: rgba(165, 165, 165, 1);
				align-self: flex-end;
				margin: -36rpx -36rpx 0 0;
				line-height: 72rpx;
				text-align: center;
			}

			&-title {
				font-size: 40rpx;
				font-weight: 800;
				color: #262626;
				margin-top: 40rpx;
			}

			&-list {
				width: 570rpx;
				margin-top: 60rpx;

				&>view {
					width: 100%;
					height: 120rpx;
					background: #F1F1F5;
					border-radius: 12rpx;
					margin-bottom: 40rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					&>view:nth-child(1) {
						font-size: 32rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #1A1A1A;
						margin-left: 22rpx;
					}

					// 按钮
					.defut {
						margin-right: 20rpx;
						width: 36rpx;
						height: 36rpx;
						background: #FFFFFF;
						border-radius: 50%;
					}

					.active {
						width: 36rpx;
						height: 36rpx;
						border: 4rpx solid #FCC928;
						opacity: 1;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 20rpx;
					}

					.active::after {
						content: '';
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						background: #FCC928;
						box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(252, 201, 40, 0.3);
						opacity: 1;
					}
				}
			}

			&-btn {
				width: 574rpx;
				height: 88rpx;
				background: #FCC928;
				box-shadow: 2rpx 12rpx 24rpx 2rpx rgba(252, 201, 40, 0.4);
				border-radius: 12rpx;
				opacity: 1;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #262626;
				text-align: center;
				line-height: 88rpx;
				z-index: 9999;
			}

			// 表单
			.mosk-form {
				width: 574rpx;
				background: #FFF;
				border-radius: 0rpx;
				margin: 0 auto;

				&-title:not(.last) {
					border-bottom: 2rpx solid #E4E4E4;
				}

				&-title {
					display: flex;
					height: 120rpx;
					align-items: center;
					font-size: 32rpx;

					text {
						font-size: 32rpx;
						font-weight: bold;
						color: #1A1A1A;
						width: 128rpx;
						margin-right: 80rpx;
						flex-shrink: 0;
					}

					.item-address {
						display: flex;
						align-items: center;
						width: 380rpx;
						height: 120rpx;
						overflow: hidden;

						.address {
							flex-shrink: 0;
							width: 162px;
							height: 120rpx;
							text-wrap: nowrap;
							line-height: 120rpx;
						}

						.icons {
							flex-shrink: 0;
						}
					}
				}

				&-btn {
					display: flex;
					width: 574rpx;
					justify-content: space-between;
					margin-top: 52rpx;

					&>view {
						display: flex;
						justify-content: center;
						align-items: center;
					}

					&>view:first-child {
						width: 158rpx;
						height: 88rpx;
						background: #F1F1F5;
						border-radius: 12rpx;
						opacity: 1;
					}

					&>view:last-child {
						width: 384rpx;
						height: 88rpx;
						background: #FCC928;
						box-shadow: 2rpx 12rpx 24rpx 2rpx rgba(252, 201, 40, 0.4);
						border-radius: 12rpx;
						opacity: 1;
					}
				}
			}
		}
	}
</style>